/*
  学习目标：使用setState修改count
  了解: 知道不可变数据
  作用: setState修改数据,
  特点: 修改数据唯一的办法就是setState
      setState({更新的变量名: 新值})

*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    count: 99,
    msg: 'hello React',
  };

  handelAdd = () => {
    // ✅ 新值覆盖旧值
    this.setState({
      count: this.state.count + 1,
      msg: this.state.msg + '~',
    });
    // 不可变数据: 不允许修改原始数据
    // ❌ 直接修改了原始数据
    // this.state.count++;

    // ❌ 不要直接修改原始数据
    // this.setState({
    //   count: ++this.state.count,
    // });
  };

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <h1>{this.state.msg}</h1>
        <button onClick={this.handelAdd}>点我+1</button>
      </div>
    );
  }
}
